<template>
  <el-row :gutter="10">
    <el-col :span="20">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="考试名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属考试类别">
                <span>{{ props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="考试 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="阅卷完成进度">
                <span>{{ props.row.shopId }}</span>
              </el-form-item>
              <!--          <el-form-item label="商品分类">-->
              <!--            <span>{{ props.row.category }}</span>-->
              <!--          </el-form-item>-->
              <!--          <el-form-item label="店铺地址">-->
              <!--            <span>{{ props.row.address }}</span>-->
              <!--          </el-form-item>-->
              <!--          <el-form-item label="商品描述">-->
              <!--            <span>{{ props.row.desc }}</span>-->
              <!--          </el-form-item>-->
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            label="考试 ID"
            prop="id">
        </el-table-column>
        <el-table-column
            label="考试名称"
            prop="name">
        </el-table-column>
        <el-table-column
            label="考试状态"
            prop="desc">
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="4">
      <div style="height: 40px"></div>
      <div v-for="table in tableData" style="height: 41px">
        <el-button  type="primary" style="width: 200px;" >结束阅卷/开启阅卷</el-button>
      </div>

    </el-col>
  </el-row>


</template>

<script>
export default {
  name: "PaperMessage",
  data() {
    return {
      tableData: [{
        id: '2402',
        name: '2024上半学年第二次月考',
        category: '江浙小吃、小吃零食',
        desc: '正在进行阅卷',
        address: '上海市普陀区真北路',
        shop: '：学校月考',
        shopId: '3556/6660'
      }, {
        id: '2401',
        name: '2024上半学年第一次月考',
        category: '江浙小吃、小吃零食',
        desc: '阅卷结束',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '2310',
        name: '2023下半学年期末考试',
        category: '江浙小吃、小吃零食',
        desc: '阅卷结束',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '2309',
        name: '2023下半学年第三次月考',
        category: '江浙小吃、小吃零食',
        desc: '阅卷结束',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }]
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>